// ProtectedRoute/index.tsx - 路由保护组件
// 这个组件用于保护需要登录才能访问的路由，验证用户登录状态

// 导入React：必须导入React才能使用JSX语法和React功能
import React from 'react';
// 导入Navigate组件：用于在未登录时重定向到登录页面
import { Navigate } from 'react-router-dom';
// 导入用户状态存储：使用Zustand store获取用户登录状态
import { useUserStore } from '@/store';

// 定义组件的属性接口（TypeScript类型定义）
// 使用接口确保传递给组件的属性类型安全
interface ProtectedRouteProps {
  children: React.ReactNode; // children属性：接收React节点，表示要保护的内容
}

// 定义ProtectedRoute组件：使用React.FC（函数组件）类型定义
// React.FC是React.FunctionComponent的简写，表示这是一个函数组件
// 泛型<ProtectedRouteProps>指定组件的属性类型
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  // 使用Zustand store获取用户登录状态
  // useUserStore是一个自定义Hook，返回用户状态对象
  // 这里使用解构赋值获取isLogin值
  const { isLogin } = useUserStore();
  
  // 如果用户未登录，重定向到登录页面
  // 这是路由保护的核心逻辑：检查用户是否登录
  if (!isLogin) {
    // 使用Navigate组件进行重定向
    // to="/login"：重定向到登录页面
    // replace={true}：使用替换导航而不是添加历史记录，避免用户点击返回按钮时回到受保护页面
    return <Navigate to="/login" replace />;
  }
  
  // 如果用户已登录，渲染子组件
  // 使用React片段<>...</>包裹children，避免添加额外的DOM元素
  // 在React中，组件必须返回单个元素，片段允许我们分组多个元素而不添加额外节点
  return <>{children}</>;
};

// 导出ProtectedRoute组件作为默认导出
// 这样其他文件可以通过import ProtectedRoute from '@/components/ProtectedRoute'来导入
export default ProtectedRoute;